<script setup lang="ts">
import type { PlusColumn } from 'plus-pro-components'

import { useDelSupplierCategory, useGetSupplierCategory } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import AddOrEdit from './add-or-edit.vue'

type IState = {
    categoryName?: string
}
const initialState = {
    categoryName: '',
}
const state = ref<IState>(cloneDeep(initialState))

const { createConfirmModal, createMessage } = useMessage()

const id = ref<string>('')
const parentId = ref<number>(0)
const type = ref<string>('')
const visible = ref<boolean>(false)
const isExpandAll = ref<boolean>(false)

const columns: PlusColumn[] = [
    {

        label: '供应商类别',
        prop: 'categoryName',
        valueType: 'input',
    },
]

const STATUS_ENUM = {
    0: '启用',
    1: '禁用',
}

const params = computed(() => ({
    ...state.value,
}))

const { data: tableData, isLoading } = useGetSupplierCategory(params)
const { mutate: delSupplierCategoryMutate } = useDelSupplierCategory()
const records = ref()
watchEffect(() => {
    if (tableData.value) {
        records.value = cloneDeep(tableData.value)
    }
})

function search(values: any) {
    state.value = { ...state.value, ...values }
}

function reset() {
    state.value = { ...initialState }
}

function handleAdd() {
    visible.value = true
    type.value = 'add'
}

function handleUpdate(mid: string) {
    type.value = 'edit'
    id.value = mid
    visible.value = true
}

function handleDelete(id: string) {
    createConfirmModal({ content: '是否确认删除？', onError: () => {
        console.log('操作取消！')
    }, onSuccess: () => {
        delSupplierCategoryMutate(id, {
            onSuccess: () => {
                createMessage.success('删除成功')
            },
        })
    } })
}
</script>

<template>
    <ElCard shadow="never"
            class="mb-20"
    >
        <SearchForm v-bind="state"
                    :columns="columns"
                    submit-text="查询"
                    class="mb-20"
                    :row-props="{ gutter: 40 }"
                    @submit="search"
                    @reset="reset"
        />
    </ElCard>

    <ElCard shadow="never">
        <el-button type="primary"
                   class="mb-20"
                   @click="handleAdd"
        >
            新增类别
        </el-button>

        <el-table v-loading="isLoading"
                  :data="tableData"
                  row-key="id"
                  border
                  :default-expand-all="isExpandAll"
                  :tree-props="{ children: 'children' }"
                  :expand-row-keys="['0']"
        >
            <el-table-column prop="categoryName"
                             label="供应商类别"
                             :show-overflow-tooltip="true"
            />

            <el-table-column prop="categorySort"
                             label="排序"
            />

            <el-table-column prop="isDisable"
                             label="状态"
            >
                <template #default="{ row }">
                    {{ STATUS_ENUM[row.isDisable] }}
                </template>
            </el-table-column>

            <el-table-column prop="createBy"
                             label="修改人"
            />

            <el-table-column label="修改时间"
                             align="center"
                             prop="createTime"
            >
                <template #default="{ row }">
                    <span>{{ row.createTime }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             align="center"
                             class-name="small-padding fixed-width"
            >
                <template #default="{ row }">
                    <el-button type="text"
                               @click="handleUpdate(row.id)"
                    >
                        修改
                    </el-button>

                    <el-button type="text"
                               @click="handleDelete(row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </ElCard>

    <AddOrEdit :key="id"
               v-model:treeData="records"
               v-model:parentId="parentId"
               v-model:type="type"
               v-model:visible="visible"
               v-model:id="id"
    />
</template>
